<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>jQuery formValidator表单验证插件 -- by:猫冬，email:wzmaodong@126.com</title>
        <link href="../css/reset.css" type="text/css" rel="stylesheet" />
        <link href="../css/zh-cn-system.css" type="text/css" rel="stylesheet" />
        <link href="../css/ft.css" type="text/css" rel="stylesheet" />
        <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
        <script src="formValidator-4.1.1.js" type="text/javascript" charset="UTF-8"></script>
        <script src="formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $.formValidator.initConfig({autotip:true,formID:"registerForm",onerror:function(msg){alert(msg)}});
                
                //  邮箱验证
                $("#email").formValidator({
                    onShow:"请输入常用的邮箱进行注册",onFocus:"6~18个字符，包括字母、数字、下划线，以字母开头，字母或数字结尾",onCorrect:"邮箱输入正确",defaultValue:""
                }).inputValidator({
                    min:6,max:100,onError:"你输入的邮箱长度非法,请确认"
                }).regexValidator({
                    regExp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onError:"你输入的邮箱格式不正确"
                });
                
                // 密码验证
                $("#password").formValidator({
                    onShow:"请输入密码",
                    onFocus:"6~16个字符,包括字母,数字,特殊符号,区分大小写",
                    onCorrect:"密码输入正确"
                }).inputValidator({
                    min:6,max:16,
                    empty:{leftEmpty:false,rightEmpty:false,emptyError:"密码两边不能有空符号"},
                    onError:"密码长度错误,请重新输入"
                });
                
                //  重复密码验证
                $("#repeatPassword").formValidator({
                    onShow:"请再次输入密码",
                    onFocus:"重新输入上面的密码",
                    onCorrect:"两次密码一致"
                }).inputValidator({
                    min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"重复密码两边不能有空符号"},onError:"重复密码不能为空,请重新输入"
                }).compareValidator({
                    desID:"password",
                    operateor:"=",
                    onError:"两次输入的密码不一致,请重新输入"
                });
                
                //  年龄验证
                $("#age").formValidator({
                    onShow:"请输入你真实的年龄",
                    onFocus:"只能输入1-150之间的数字",
                    onCorrect:"输入正确"
                }).inputValidator({
                    min:1,max:150,
                    type:"value",
                    onError:"年龄必须在1-150之间,请重新输入"
                }).defaultPassed();
                
                $("#async").formValidator({
                    onShow:"请输入测试数据",
                    onFocus:"测试用ajax数据",
                    onCorrect:"输入正确"
                }).inputValidator({
                    min:6,max:200,
                    onError:"长度应该在6-200之间"
                }).ajaxValidator({
                    dataType : "html",
                    async : true,
                    url : "ajax.php",
                    success : function(data){
                        if (data == 1)
                            return true;
                        else
                            return false;
                    },
                    buttons: $(".button"),
                    onError : "输入的数据不正确",
                    onWait : "正在对用户名进行合法性校验，请稍候..."
                });
                
            });
        </script>
    </head>
    <body>
        <div style="width:900px; margin: 50px auto;">
            <form action="" method="post" name="registerForm" id="registerForm">
                <fieldset>
                    <legend>表单验证</legend>
                    <table width="100%" class="Ftable">
                        <tr>
                            <th width="120">用户名:</th>
                            <td class="y-bg">
                                <input type="text" id="email" name="email" value="" size="35" />
                                <div id="emailTip" class="tips"></div>
                            </td>
                        </tr>
                        <tr>
                            <th width="120">密码:</th>
                            <td class="y-bg">
                                <input type="password" id="password" name="password" value="" size="30" />
                                <div id="passwordTip" class="tips"></div>
                            </td>
                        </tr>
                        <tr>
                            <th width="120">重复密码:</th>
                            <td class="y-bg">
                                <input type="password" id="repeatPassword" name="repeatPassword" value="" size="30" />
                                <div id="repeatPasswordTip" class="tips"></div>
                            </td>
                        </tr>
                        <tr>
                            <th width="120">真实年龄:</th>
                            <td class="y-bg">
                                <input type="text" id="age" name="age" value="" size="6" />
                                <div id="ageTip" class="tips"></div>
                            </td>
                        </tr>
                        <tr>
                            <th width="120">测试异步:</th>
                            <td class="y-bg">
                                <input type="text" id="async" name="async" value="" size="10" />
                                <div id="asyncTip" class="tips"></div>
                            </td>
                        </tr>
                        <tr> 
                            <th></th>
                            <td>
                                <input type="submit" name="button" id="button" value="提交" class="button" />
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </form>
        </div>
    </body>
</html>